<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <span class="iconfont icon-return"></span>
        <p class="title">有品智能家电</p>
        <span class="iconfont icon-share"></span>
    </header>
    <main>
        <div class="ads">
            <p>
                <span class="iconfont icon-star"></span>
                超值精选
            </p>
            <p>
                <span class="iconfont icon-vip"></span>
                潮流科技
            </p>
            <p>
                <span class="iconfont icon-shield"></span>
                品质保证
            </p>
        </div>
        <div class="banner">
            <div class="swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../public/imgs/8.png" alt="">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <ul class="type">
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>大家电</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>厨房电器</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>生活小电</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>智能安防</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>数码影音</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>个护电器</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>智能清洁</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p>宅家必备</p>
                </a>
            </li>
        </ul>
        <div class="hot">
            <div class="top">
                <p class="title">
                    热销榜单
                </p>
                <span class="more">
                    查看更多>
                </span>
            </div>
            <ul>
                <li class="refrigerator">
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>热卖冰箱榜</p>
                        <span>超高性价比</span>
                    </a>
                </li>
                <li class="washer">
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>畅销洗衣机榜</p>
                        <span>品质推荐</span>
                    </a>
                </li>
                <li class="heating">
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>应季电暖器榜</p>
                        <span>品质推荐</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="intelligent">
            <p class="title">全屋智能</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <span>智能客厅</span>
                        <div>
                            乐享舒适生活
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <span>智能厨房</span>
                        <div>
                            烹饪幸福的味道
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <span>智能卫浴</span>
                        <div>
                            健康洁净更舒心
                        </div>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <span>智能书房</span>
                        <div>
                            安静愉悦空间
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <div class="goods">
            <p class="title">好物测评</p>
            <ul>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>智能门锁</p>
                        <span>安全全家</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>羽绒服</p>
                        <span>温暖一冬</span>
                    </a>
                </li>

                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>智能体重秤</p>
                        <span>观察体重</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="../../public/imgs/8.png" alt="">
                        <p>智充电宝</p>
                        <span>充满你的手机</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="likes">
            <p class="title">猜你喜欢</p>
            <div class="link">
                <a href="#" class="active">大家电</a>
                <a href="#">生活小电</a>
                <a href="#">厨房电器</a>
                <a href="#">智能安防</a>
                <a href="#">数码周边</a>
                <a href="#">个护电器</a>
            </div>
        </div>
        <ul class="commodity">
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="vip">up会员</span>
                    <span class="discount">折上折</span>
                    <span class="free">售后免邮</span>
                    <p class="price">￥<span class="num">199</span>起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="vip">up会员</span>
                    <span class="discount">折上折</span>
                    <span class="free">售后免邮</span>
                    <p class="price">￥<span class="num">299</span>起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="vip-free">会员售后免邮</span>
                    <p class="price">￥<span class="num">199</span>起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="self-operated">小米自营</span>
                    <span class="interest-free">分期免息</span>
                    <p class="price">￥<span class="num">499</span>起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="vip">up会员</span>
                    <span class="discount">折上折</span>
                    <span class="free">售后免邮</span>
                    <p class="price">￥<span class="num">199</span>起</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="../../public/imgs/8.png" alt="">
                    <p class="title">大肥猫球球</p>
                    <span class="discount">折上折</span>
                    <span class="kill">有品秒杀</span>
                    <p class="price">￥<span class="num">499</span>起</p>
                </a>
            </li>
        </ul>
    </main>
    <footer>
        <a href="#">
            <span class="iconfont icon-washer"></span>
            <p>智能家电</p>
        </a>
        <a href="#">
            <span class="iconfont icon-camera"></span>
            <p>3C数码</p>
        </a>
    </footer>
</body>
</html>